<template>
  <div>
      vx:{{vx}};vy:{{vy}}
      <div class="fbz-div" :style="{'left':x+'px','top':y+'px'}">
      </div>
  </div>
</template>
<script>
export default {
    data(){
        return{
            x:10,
            y:200,
            vx:0,
            vy:0,
            maxVx:10,
            minVx:-10,
            ax:4,
            g:0.5
        }
    },
    methods:{
        jump(i){
            let j=0
            let interval=setInterval(()=>{
                let v0=i
                this.y=200-(v0*j-this.g*j*j/2)
                j++
                if(j>=2*v0/this.g){
                    this.y=200
                    clearInterval(interval)
                }
            })
        }
    },
    mounted(){
        setInterval(()=>{
            if(this.vy<0){
                let r=this.vy+this.g
                if(r>0){
                    r=0
                }
                this.vy=r
            }
            
            if(this.vx>0 && this.vx<=10){
                this.vx-=0.5
            }
            if(this.vx>=-10 && this.vx<0){
                this.vx+=0.5
            }
            
            this.x+=this.vx
            
            this.y+=this.vy
            
        },20)

        document.onkeydown=(e=>{
            switch(e.key){
                case 'ArrowUp':{
                   this.jump(10);break
                }
                case 'ArrowLeft':{
                    if(this.vx>this.minVx+this.ax)
                    this.vx-=this.ax
                    break
                }
                case 'ArrowRight':{
                    if(this.vx<this.maxVx-this.ax)
                    this.vx+=this.ax
                    break
                }
                default:break;
            }
        })
    }
};
</script>
<style scoped>
    .fbz-div{
        position: relative;

        background: blue;
        width: 20px;
        height: 20px;
    }
</style>
